<div class="clearfix">
	<div class="col-md-8 p-xs text-center animated fadeInRightBig">
		<div class="panel panel-default" id="left">
			<div class="panel-heading text-center text-muted">碳排放与全球气候变化</div>
			<div class="panel-body">
				<div style="height:0px" class="carbon_chart1"></div>
			</div>
		</div>
	</div>
	<div class="col-md-4 p-xs animated fadeInRightBig">
		<div class="panel panel-default" id="r_t">
			<div class="panel-heading text-center text-muted">实时 PUE 值</div>
			<div class="panel-body">
				<div style="height:180px" id="pue"></div>
			</div>
		</div>
		<div class="panel panel-default" id="r_b">
			<div class="panel-heading text-center text-muted">表盘与摄像头</div>
			<div class="panel-body">
				<div style="height:120px" class="camera col-xs-6"></div>
				<div style="height:120px" class="camera col-xs-6"></div>
				<div style="height:120px" class="camera col-xs-6"></div>
				<div style="height:120px" class="camera_pic col-xs-6"><%= image_tag "carbon_shot.jpg",width:"100px" %></div>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript">
	// //设置3个模块的高度
	var left = document.body.clientHeight - 100;
	var r_t = left * 0.45 - 10;
	var r_b = left * 0.55 -10;
	$("#left").height(left);
	$(".carbon_chart1").height(left);
	$("#r_t").height(r_t);
	$("#pue").height(r_t-60);
	$("#r_b").height(r_b);
	$("#camera").height(r_b-60);

	// 路径配置
	require.config({
		paths: {
			echarts: '/assets/echarts'
		}
	});		
	// 使用
	require(
	[
		'echarts',
		'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
	],

	function (ec) {
		// 基于准备好的dom，初始化echarts图表
		$(".carbon_chart1").each(function(){
			var myChart = ec.init($(this).get(0));   

			 var option = {
			 	grid: {
			 		x: 60,
			 		x2: 60,
			 		y: 100,
			 		y2: 120
			 	},
			 	tooltip : {
			 		trigger: 'axis'
			 	},
			 	toolbox: {
			 		show : true,
			 		feature : {
			 			mark : {show: true},
			 			dataView : {show: true, readOnly: false},
			 			magicType: {show: true, type: ['line', 'tiled']},
			 			restore : {show: true},
			 			saveAsImage : {show: true}
			 		}
			 	},
			 	calculable : true,
			 	xAxis : [
			 	{
			 		type : 'category',
			 		boundaryGap : false,
			 		data : ['1','2','3','4','5','6','7','8','9','10','11','12']
			 	}
			 	],
			 	yAxis : [
			 	{
			 		type : 'value',
			 		axisLabel : {
			 			formatter: '{value} ml'
			 		}
			 	},
			 	{
			 		type : 'value',
			 		name : '温度',
			 		axisLabel : {
			 			formatter: '{value} °C'
			 		}
			 	}
			 	],
			 	series : [
				 	{
				 		name:'平均温度',
				 		type:'line',
				 		smooth:false,
				 		yAxisIndex: 1,
				 		data:[1.0, 7.2, -3.3, 6.5, 2.3, -1.02, 0.203, -2.34, 0.230, -1.65, 1.20, -0.6]
				 	},
				 	{
				 		name:'最高温度',
				 		smooth:true,
				 		type:'line',
				 		stack: '总量',
				 		itemStyle: {normal: {areaStyle: {type: 'default',color:'#ffb51b'}}},
				 		data:[120, 120, 120, 120, 120, 120, 120, 120, 120,200, 330, 1820]
				 	},
				 	{
				 		name:'平均湿度',
				 		smooth:true,
				 		type:'line',
				 		stack: '总量',
				 		itemStyle: {normal: {areaStyle: {type: 'default',color:'#32f6cc'}}},
				 		data:[620, 650, 420, 720, 420, 720, 420, 720, 320,500, 830, 1820]
				 	}
				 ]
			};
			// 为echarts对象加载数据 
			myChart.setOption(option); 
		});
	}
);	

</script>

<script type="text/javascript">
	// 路径配置
	require.config({
		paths: {
			echarts: '/assets/echarts'
		}
	});	
	// pue图表
	require(
	[
		'echarts',
		'echarts/chart/gauge'
	],
	function (pue){
		var pueChart = pue.init(document.getElementById('pue'), 'macarons'); 
		option = {
			tooltip : {
				formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
				{
					name:'业务指标',
					type:'gauge',
					center: ['50%', '50%'],
					radius: [0, '100%'],
					detail : {formatter:'{value}%'},
					data:[{value: 50, name: 'PUE'}]
				}
			]
		};
		timeTicket = setInterval(function (){
			option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
			pueChart.setOption(option, true);
		},2000);
	}
);
</script>
<!-- 摄像头 -->
<script type="text/javascript">
  // 路径配置
  require.config({
    paths: {
      echarts: '/assets/echarts'
    }
  });

  // 使用
  require(
  [
    'echarts',
    'echarts/chart/pie'
  ],
  function (ec) {
    $(".camera").each(function(){
      var camera = ec.init($(this).get(0));   
      var labelTop = {
        normal : {
          label : {
            show : true,
            position : 'center',
            formatter : '{b}',
            textStyle: {
              baseline : 'top',
              color: '#7e7e7e',
              fontSize: 10
            }
          },
          labelLine : {
            show : false
          }
        }
      
                };
      var labelFromatter = {
        normal : {
          label : {
            formatter : function (params){
              return 100 - params.value + '%'
            },
            textStyle: {
              baseline : 'bottom',
              fontSize: 24
            }
          }
        },
      }
      var labelBottom = {
        normal : {
          color: '#eee',
          label : {
            show : true,
            position : 'center'
          },
          labelLine : {
            show : false
          }
        },
        emphasis: {
          color: 'rgba(0,0,0,0)'
        }
      };
      var radius = ['80%', '88%'];
      var option = {
        legend: {
          x : 'center',
          y : 'center',
          data:[]
        },
        series : [
          {
            type : 'pie',
            center : ['50%', '50%'],
            radius : radius,
            x:'80%', // for funnel
            itemStyle : labelFromatter,
            data : [
              {name:'other', value:60, itemStyle : labelBottom},
              {name:'输入总功率', value:40,itemStyle : labelTop}
                      ]
                  },
        ],
      };
      camera.setOption(option); 
    });
  });
                    
</script>
